<template>
  <div>
    <div class="card">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/uerAvatar.svg" class="title-icon">
          <!-- 判断渲染用户名还是游客信息 -->
          <span v-text="username || '游客'"></span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="card">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/wdjl.svg" class="title-icon">
          <span>个人信息</span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="card" @click="goRecode">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/tdjl.svg" class="title-icon">
          <span>投递记录</span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="card">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/lxwm.svg" class="title-icon">
          <span>联系我们</span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="card">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/cjwt.svg" class="title-icon">
          <span>常见问题</span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="card">
      <div class="flex-center">
        <div class="title">
          <img src="@/assets/img/flxy.svg" class="title-icon">
          <span>法律协议</span>
        </div>
        <el-icon :size="14">
          <i-ep-ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="submit">
      <!-- 根据用户名判断渲染登录按钮或注销登录按钮 -->
      <el-button @click="goLogin" v-if="!username" type="primary" round size="large">登录</el-button>
      <el-button @click="logout" v-else type="danger" round size="large">注销</el-button>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import useUserStore from '@/store/index.js'
import { storeToRefs } from 'pinia';
const store = useUserStore();
const { token, username } = storeToRefs(store);
const router = useRouter()
//登录
const goLogin = () => {
  router.push('/login')
}
//注销
const logout = () => {
  store.removeUserData()
}
//跳转到投递记录页
const goRecode = () => {
  router.push('/recode')
}
</script>